<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-bg">
			<image class="bg" src="/static/image/bg/my.jpg" mode="scaleToFill"></image>
			<view class="user-info">
				<view class="profile-circle">
					<image src="/static/image/bg/bg1.jpg" mode="scaleToFill"></image>
				</view>
				<text>{{userData.username}}</text>
			</view>
		</view>
		<!-- 列表：操作清单 -->
		<view v-for="(item, index) in userMenu" :key="index">
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="item" :title="item.name" link @click="handleMenuItemClick(index)"></uni-list-item>
		</view>
		<!--修改密码弹窗-->
		<view>
			<uni-popup ref="updatePasswordDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="修改密码" placeholder="请输入密码" @confirm="updatePasswordConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	
	</view>
</template>

<script>
	// 引入用户菜单
	import { userMenu } from "../../commons/mock.js";
	export default {
		data() {
			return {
				// 用户接受从登录页面传递过来的信息
				userData: {},
				// 用户菜单
				userMenu
				
			}
		},
		methods: {
			// 判断点击哪个操作项
			handleMenuItemClick(index) {
				if (index === 0) {
					console.log("歌曲收藏");
					// 跳转到我喜欢页面
					uni.navigateTo({
						url:"/pages/favorite/favorite"
					})
				}
				
				if (index === 1) {
					console.log("修改密码");
					// 打开修改密码弹窗
					this.$refs.updatePasswordDialog.open();
					}
				
				
				if (index === 2) {
					console.log("退出登录");
					uni.clearStorageSync(); //清空本地缓存
					uni.switchTab({
						url:'/pages/index/index' //跳转到首页
					})
				}
			},
			updatePasswordConfirm(newPassword) {
				// 接收的数据
				const updateData = {
					phoneNumber:'1234567890', //若本地缓存有，则从本地缓存读取
					newPassword: newPassword,
					oldPassword:'123456', //输入的旧密码与后端进行比对
				}
				
				console.log(JSON.stringify(updateData));
				uni.request({
					url:'https://apifoxmock.com/m1/5460619-0-default/updatePassword',
					method:'PUT',
					header: {
						'Content-type': 'application/json'  //设置请求头，表明发送的是JSON数据
					},
					data:JSON.stringify(updateData), //将数据转换为JSON字符串
					success:(res) => {
						console.log(res);
						if (res.data.statusCode	=== 200) {
							// 修改成功，弹出成功消息提示框
							uni.showToast({
								title:res.data.message,
								icon:'success'
							});
						}
						else if( res.data.statusCode === 400) {
							// 修改失败，弹窗提示消息
							uni.showToast({
								title:res.data.message,
								icon:"error"
							})
						}
					},
					fail: (err) => {
						// 请求失败，处理失败逻辑
						console.error('请求失败',err);
						// 可以在这里显示网络错误等信息给用户
					}
				});
			}
		},
		// 登录拦截
		onShow() {
		// 每次显示个人中心界面时，均验证用户是否存在
		const loginUserData = uni.getStorageSync('userData');
		if (!loginUserData) {
			// 如果没有用户数据，则跳转到登录界面
				uni.redirectTo({
					url:"/pages/login_register/login_register"
				});
		} else {
			//将登录用户信息传递给个人中心也没得userData
			this.userData = loginUserData;
			console.log(this.userData);
		}
	}
	}
	
</script>

<style lang="scss">
	// 用户信息展示区
	.user-bg {
		width: 100%;
		height: 38vh;
		position: relative;
		overflow: hidden;
		// 背景图
		.bg {
			width: 100%;
			height: 100%;
		}
		// 用户信息
		.user-info {
			position: absolute;
			left: 50%;
			top: 60%;
			transform: translate(-50%, -50%);
			text-align: center;
			// 用户头像
			.profile-circle {
				position: relative;
				width: 180rpx;
				height: 180rpx;
				
				image {
					margin: 20rpx 0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					// 多重阴影效果
					box-shadow: 0 0 0 10rpx white,
					            0 0 0 20rpx #00c273,
								0 0 0 30rpx white;
				}
			}
			// 用户名
			text {
				display: block;
				margin-top: 35rpx;
				font-weight: bold;
				margin-top: 60rpx;
			}
		}
	}
</style>
